<template>
	<view class="banner">
		<u-swiper :list="list" @change="tabsChange" @click="swiperClick" :height="height" :keyName="keyName"
			:indicatorStyle="{bottom:'40rpx'}" autoplay circular :duration="200" :radius="0">
			<view slot="indicator" class="indicator">
				<view :class="['indicator__dot',index === current ? 'indicator__dot--active':'']"
					v-for="(item, index) in list" :key="index">
				</view>
			</view>
		</u-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0
			}
		},
		props: {
			// 轮播图列表
			list: {
				type: Array,
				default: (() => {
					return [];
				})
			},
			// 高度
			height: {
				type: String,
				default: '400rpx'
			},
			// 数组中指定对象的目标属性名
			keyName: {
				type: String,
				default: 'image'
			},
		},
		methods: {
			tabsChange(e) {
				this.current = e.current
			},
			swiperClick(index) {
				this.$emit('jump', index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 694rpx;

		.indicator {
			@include flex(row);
			justify-content: center;

			.indicator__dot {
				height: 16rpx;
				width: 16rpx;
				border-radius: 100px;
				background-color: #888888;
				margin: 0 5px;
				transition: background-color 0.3s;
			}

			.indicator__dot--active {
				background-color: #333333;
			}
		}
	}
</style>